<template>
  <Container class="tyre-list">
    <div class="container-header large" slot="header">
      <Form class="search">
        <Row>
           <Col span="8">
            <FormItem label="科室">
              <Select v-model="list.form.departmentOfficeId" clearable filterable @on-change="setDepartment">
                <Option v-for="(item, index) of reportDepart" :value="item" :key="index">{{item.name}}</Option>
              </Select>
            </FormItem>
            <FormItem label="选择门店">
              <SelectStore v-model="list.form.storeId" @input="onSearchBtnClick"></SelectStore>
            </FormItem>
          </Col>
          <Col span="7">
            <FormItem label="部门">
              <Select v-model="list.form.departmentId" clearable filterable @on-change="setDistribute">
                <Option v-for="(item, index) of list.departments" :key="index" :value="item.id">{{item.name}}</Option>
              </Select>
            </FormItem>
            <FormItem label="经销商">
              <Select multiple v-model="list.form.distributorId" clearable  @on-change="getData">
                <Option v-for="(item, index) of list.distributors" :key="index" :value="item.distributorId">{{item.distributorName}}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="7">
            <FormItem label="门店类型">
              <Select v-model="list.form.storeType" filterable clearable  @on-change="getData">
                <Option v-for="(item, index) of list.storeTypes" :key="index" :value="item.id">{{item.label}}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col class-name="search" span="2">
            <Button class="btn-search large" type="primary" icon="ios-search" @click="onSearchBtnClick"></Button>
          </Col>
        </Row>
      </Form>
    </div>
    <Tabs v-model="tab">
      <export-btn 
        :param="exportParam" 
        url='/report/purch_gift_statistics/export'
        class="item" 
        slot="extra"></export-btn>
      <TabPane label="3-4月抢好胎送福券" name="tab1">
        <homeTable
          :list="list"
          @getData="getData"
          @onPageSizeChange="onPageSizeChange"
          @onPageChange="onPageChange"
          @onSelectionChange="onSelectionChange"/>
      </TabPane>
    </Tabs>
    <StoreDataItem ref="store"></StoreDataItem>
  </Container>
</template>
<script>
import homeTable from "~/homeTable"
import SelectStore from '~/SelectStore'
import TyreListData from "./list/TyreMarchListData"
import StoreDataItem from './list/StoreDataItem'
import { clearEmpty } from '@/util'
import { mapGetters } from 'vuex'
export default {
  name: 'home/user/tyreMarch',
  components: {
    homeTable,
    SelectStore,
    StoreDataItem
  },
  data() {
    return {
      tab: "tab1",
      list: TyreListData
    }
  },
  mounted() {
    this.list.currentPage = ~~this.$route.query.currentPage || 1
    this.list.pageSize = ~~this.$route.query.pageSize || this.list.pageSize
    this.$store.dispatch('getListDepartmentTree')
    this.getStoreType()
    this.getData();
    this.$bus.$on('onCheck', this.onCheckStore)
  },
  destroyed () {
    this.$bus.$off()
  },
  methods: {
    onSearchBtnClick() {
      this.list.currentPage = 1
      this.getData()
    },
    getData() {
      this.list.status = "loading"
      let param = {
        current: this.list.currentPage,
        size: this.list.pageSize,
        storeId: this.list.form.storeId,
        departmentOfficeId: (this.list.form.departmentOfficeId && Object.keys(this.list.form.departmentOfficeId).length > 0) ? this.list.form.departmentOfficeId.id : null,
        departmentId: this.list.form.departmentId,
        distributorIds: this.list.form.distributorId,
        giftType: this.list.form.giftType,
        storeTypeId: this.list.form.storeType
      }
      param = clearEmpty(param)
      this.$ajaxGet("/report/purch_gift_statistics/page", param).then(data => {
        this.list.totalItem = Number(data.total)
        this.list.data = (data.records || [])
        this.list.status = "pass"
      }).catch(() => {
        this.list.status = "error"
      })
    },
    setDepartment(row) {
      if (!row) {
        this.list.form.departmentOfficeId = {}
        this.list.form.departmentId = null
        this.list.departments = []
        this.list.form.distributorIds = []
        this.list.distributors = []
      } else {
        this.list.departments = row.children
      }
    },
    setDistribute(id) {
      this.list.form.distributorIds = []
      if (id) {
        this.$store.dispatch('getDistributorDepartment', {departId: id}).then(res=> {
          this.list.distributors = res
        })
      } else {
        this.list.distributors = []
      }
    },
    getStoreType() {
      this.$ajaxGet('/report/purch_exchange_record/store_type_map/MAR_APR_PURCH_ACTIVITY').then(data => {
        this.list.storeTypes = []
        for (let [key, value] of Object.entries(data)) {
          this.list.storeTypes.push({
            id: key,
            label: value
          })
        }
      })
    },
    onCheckStore(id, isNewStore) {
      this.$refs.store.openModal(id, isNewStore)
    },
    onPageChange(number) {
      this.list.currentPage = number;
      this.$router.push({
        name: "home/tyreMarch/list",
        query: {
          currentPage: this.list.currentPage,
          pageSize: this.list.pageSize
        }
      });
      this.getData();
    },
    onPageSizeChange(pageSize) {
      this.list.currentPage = 1;
      this.list.pageSize = pageSize;
      this.$router.push({
        name: "home/tyreMarch/list",
        query: {
          currentPage: this.list.currentPage,
          pageSize: this.list.pageSize
        }
      });
      this.getData();
    }
  },
  computed: {
    ...mapGetters(['reportDepart']),
    exportParam() {
      let param = {
        storeId: this.list.form.storeId,
        departmentOfficeId: (this.list.form.departmentOfficeId && Object.keys(this.list.form.departmentOfficeId).length > 0) ? this.list.form.departmentOfficeId.id : null,
        departmentId: this.list.form.departmentId,
        distributorIds: this.list.form.distributorIds,
        giftType: this.list.form.giftType,
        storeTypeId: this.list.form.storeType
      }
      param = clearEmpty(param)
      return param
    }
  }
}
</script>